import 'package:flutter/material.dart';
import 'package:flutter_widget/custom/custom_appbar.dart';

// ignore: must_be_immutable
class FormPage extends StatefulWidget {
  String name;
  FormPage({Key? key, required this.name}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return _FormPage();
  }
}

class _FormPage extends State<FormPage> {
  final TextEditingController _controller = TextEditingController();
  final registerFormKey = GlobalKey<FormState>();
  late String verification, telphone, password, repassword;
  bool check = false;

  void onFinish() {
    var checked = registerFormKey.currentState!.validate();
    if (checked) {
      registerFormKey.currentState!.save();
      debugPrint(verification);
      debugPrint(telphone);
      debugPrint(password);
    }
  }

  String? validatorTelphone(value) {
    if (value.isEmpty) {
      return '手机号码输入不为空';
    }
    if (value.length != 11) {
      return '手机号码位数为11位';
    }
    return null;
  }

  String? validatorVerification(value) {
    if (value.isEmpty) {
      return '验证码输入不为空';
    }
    if (value.length != 6) {
      return '验证码位数为6位';
    }
    return null;
  }

  String? validatorPassword(value) {
    if (value.isEmpty) {
      return '密码输入不为空';
    }

    return null;
  }

  String? validatorRePassword(value) {
    if (value.isEmpty) {
      return '确认密码输入不为空';
    }

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppbar(widget.name, Theme.of(context).primaryColor),
      resizeToAvoidBottomInset: false,
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              TextField(
                controller: _controller,
                decoration: const InputDecoration(
                    prefixIcon: Icon(Icons.verified_user),
                    hintText: "请输入用户名",
                    labelText: '用户名'),
              ),
              // ignore: deprecated_member_use
              const SizedBox(
                height: 16,
              ),
              // ignore: deprecated_member_use
              ElevatedButton(
                onPressed: () {
                  // ignore: avoid_print
                  print(_controller.text);
                },
                child: const Text(
                  '提交',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),

              Form(
                key: registerFormKey,
                child: Column(
                  children: [
                    TextFormField(
                      decoration: const InputDecoration(
                        labelText: "手机号码",
                        prefixIcon: Icon(Icons.phone),
                        hintText: "请输入手机号",
                      ),
                      validator: validatorTelphone,
                      onSaved: (value) => {telphone = value!},
                    ),
                    TextFormField(
                      decoration: const InputDecoration(
                        labelText: "验证码",
                        prefixIcon: Icon(Icons.verified),
                        hintText: "请输入验证码",
                      ),
                      validator: validatorVerification,
                      onSaved: (value) => {verification = value!},
                    ),
                    TextFormField(
                      decoration: const InputDecoration(
                        labelText: "密码",
                        prefixIcon: Icon(Icons.lock),
                        hintText: "请输入密码",
                      ),
                      validator: validatorPassword,
                      onSaved: (value) => {password = value!},
                    ),
                    TextFormField(
                      decoration: const InputDecoration(
                        labelText: "确认密码",
                        prefixIcon: Icon(Icons.lock),
                        hintText: "请输入确认密码",
                      ),
                      validator: validatorRePassword,
                      onSaved: (value) => {repassword = value!},
                    ),
                    CheckboxListTile(
                      value: check,
                      title: const Text('开通并遵守协议'),
                      activeColor: Theme.of(context).primaryColor,
                      onChanged: (val) {
                        // val 是布尔值
                        setState(() {
                          check = val!;
                        });
                      },
                    ),
                    const SizedBox(
                      height: 32.0,
                    ),
                    SizedBox(
                      width: double.infinity,
                      // ignore: deprecated_member_use
                      child: ElevatedButton(
                        onPressed: () => {onFinish()},
                        // ignore: deprecated_member_use

                        // elevation: 0.0,
                        child: const Text(
                          '注册',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
